<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>测试</title>
    <meta name="keywords" content="蜗牛学堂">
    <meta name="description" content="蜗牛学堂">
    <link href="/css/v2_index.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="/js/dedeajax2.js"></script>
</head>
<body>
    <div>
        <div class="main">
            <div>
                <button type="primary" @click="publish" style="position: fixed;right: 20%">发布动态</button>
                <ul class="list" v-infinite-scroll="load" style="overflow:auto" infinite-scroll-immediate="false"
                    v-loading="loading">
                    <li v-for="(item,index) in articles" class="list-item">
                        <div class="list-top">
                            <img :src="item.publisherAvatarUrl"/>
                            <div style="margin-left: 6px;color: #2073e3;float: left">
                                <span style="float: left">{{ item.publisherNickName }}</span>
                                <div style="width: 200px"></div>
                                <span style="float: left;font-size: 15px;align-items: center;display: flex;color: #a426ce">
                  {{ item.publisherSchool }}
                                    <!--性别图标-->
                  <img v-if="item.publisherGender===1" style="width: 26px;height: 26px;margin-left: 5px"
                       src="https://guilinus.oss-cn-guangzhou.aliyuncs.com/%E6%80%A7%E5%88%AB_%E7%94%B7.png"/>
                  <img v-if="item.publisherGender===2" style="width: 26px;height: 26px;margin-left: 5px"
                       src="https://guilinus.oss-cn-guangzhou.aliyuncs.com/%E6%80%A7%E5%88%AB-%E5%A5%B3.png"/>
                </span>
                            </div>
                        </div>

                        <div class="list-main">
                            <div class="list-main-text">
                                <p>{{ item.content }}</p>
                            </div>
                            <div class="list-main-img">
                                <div v-for="img in item.imgUrls">
                                    <el-image :src="img" fit="cover"
                                              :preview-src-list="item.imgUrls" @click="addClick(item.id)"></el-image>
                                </div>
                            </div>
                            <div style="width: 100%"></div>
                        </div>

                        <div class="list-bottom">
                            <span style="font-size: 17px;text-align: left;">{{ item.publishTimeRes }}</span>
                            <span>
                浏览{{ item.click }}次
              </span>
                            <!--评论-->
                            <span @click="toComment(item.id)">
                <img
                        src="https://guilinus.oss-cn-guangzhou.aliyuncs.com/icon/%E8%AF%84%E8%AE%BA%E5%8C%BA%20%281%29.png"/>
                <span style="font-size: 26px">{{ item.comment }}</span>
              </span>
                            <!--点赞-->
                            <span>
                <img v-if="!item.isLike" @click="doLike(item.id,index)"
                     src="https://guilinus.oss-cn-guangzhou.aliyuncs.com/icon/%E7%82%B9%E8%B5%9E%20%281%29.png"/>
                <img v-if="item.isLike" @click="cancelLike(item.id,index)"
                     src="https://guilinus.oss-cn-guangzhou.aliyuncs.com/icon/%E7%82%B9%E8%B5%9E_%E5%9D%97%20%281%29.png"/>
                <span style="font-size: 26px">{{ item.zan }}</span>
              </span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <publish-dia ref="dia"></publish-dia>
        <!--    <article-detail ref="detail"></article-detail>-->
        <!--评论弹窗-->
        <div v-if="drawer" class="commentDrawer">
            <span>评论区</span>
            <span @click="drawer = false" style="cursor: pointer;float: left;margin-left: 10px">关闭</span>
            <!--输入框-->
            <div class="inputComment">
        <textarea v-model="textareaContent" placeholder="说点什么..." maxlength="200" @input="calcInput">
        </textarea>
                <span style="font-size: 14px;float: left">还可以输入{{ canInputText }}个字符</span>
                <span class="sent" @click="sentComment">发送</span>
            </div>
            <!--评论列表-->
            <div class="comment-list">
                <ul class="comment-ul">
                    <li class="comment-li" v-for="(com,index) in comments">
                        <div class="comment-li-top">
                            <img :src="com.avatarUrl"/>
                            <span class="comment-nickName">{{ com.nickName }}</span>
                            <span style="font-size: 15px;margin-left: auto">{{ com.commentTimeRes }}</span>
                            <span v-if="!com.openReply"
                                  style="cursor: pointer;margin-left:auto;font-size: 16px" @click="openReply(com,index)">
                回复</span>
                            <span v-if="com.openReply"
                                  style="cursor: pointer;margin-left: auto;font-size: 16px" @click="closeReply(index)">
                收起</span>
                        </div>

                        <div class="comment-li-content" @click="openReply(com,index)">
                            <span style="text-align: left;float: left;cursor: pointer">{{ com.content }}</span>
                        </div>
                        <div class="inputReply" v-if="com.openReply">
              <textarea v-model="com.replyContent" :placeholder="com.placeholder" maxlength="200"
                        @input="calcInputReply(index)">
              </textarea>
                            <span style="font-size: 14px;float: left">还可以输入{{ com.canInputReply }}个字符</span>
                            <span class="sent" @click="sentReply(com,index)">回复</span>
                        </div>
                        <!--回复列表-->
                        <ul class="reply-ul">
                            <li class="reply-li" v-for="(reply,index1) in com.replyies">
                                <div class="reply-li-top">
                                    <img :src="reply.fromUserAvatarUrl"/>
                                    <span class="reply-nickName">{{ reply.fromUserNickName }}
                    <span style="font-size: 15px;margin: 3px;">回复</span>
                    {{reply.toUserNickName}}</span>
                                    <span style="margin-left: auto;font-size: 13px">{{ reply.replyTimeRes }}</span>
                                    <span v-if="!reply.openReply"
                                          style="cursor: pointer;margin-left:auto;font-size: 14px" @click="openReplySon(reply)">
                  回复</span>
                                    <span v-if="reply.openReply"
                                          style="cursor: pointer;margin-left: auto;font-size: 14px" @click="closeReplySon(reply)">
                  收起</span>
                                </div>
                                <div class="reply-li-content" @click="openReplySon(reply)">
                                    <span style="float: left">{{ reply.content }}</span>
                                </div>
                                <!--回复下的回复框-->
                                <div class="inputReplySon" v-show="reply.openReply">
                  <textarea v-model="reply.replyContent" :placeholder="reply.placeholder" maxlength="200"
                            @input="calcReplySon(index,index1)">
                  </textarea>
                                    <span style="font-size: 12px;float: left">还可以输入{{ reply.canInputReply }}个字符</span>
                                    <span class="sent" @click="sentReplySon(com,reply)">回复</span>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

<script>

</script>

<style scoped>
    .main {
        width: 70%;
        position: absolute;
        left: 15%;
        top: 4%;
        height: 950px;
        border-radius: 13px;
    }

    .list {
        margin-top: 0;
        margin-left: 15%;
        list-style-type: none;
        width: 83%;
        height: 940px;
    }

    .list-item {
        margin: 3px;
        border-radius: 10px;
        padding: 5px;
        float: left;
        width: 90%;
    }

    .list-top img {
        width: 45px;
        height: 48px;
        border-radius: 50%;
        object-fit: fill;
    }

    .list-top {
        display: flex;
        align-items: center;
        width: 300px;
        flex-wrap: wrap;
    }

    .list-main {
        float: left;
        display: flex;
        flex-wrap: wrap;
    }

    .list-main-text {
        text-align: left;
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 700px;
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
    }

    .list-main-img {
        margin-top: 6px;
        float: left;
        display: flex;
        flex-wrap: wrap;
        width: 600px;
    }

    .list-main-img .el-image {
        width: 195px;
        height: 195px;
        border-radius: 8px;
        margin: 2px;
    }

    .list-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        width: 600px;
        height: 40px;

    }

    .list-bottom img {
        width: 30px;
        height: 30px;
        margin-top: 5px;
    }

    .commentDrawer {
        position: fixed;
        z-index: 2005;
        width: 30%;
        height: 100%;
        right: 0;
        top: 0;
        border-top-left-radius: 14px;
        border-bottom-left-radius: 14px;
    }

    .inputComment {
        margin-top: 5%;
        width: 88%;
        margin-left: 3%;
        position: relative;
        height: 185px;
        border-radius: 13px;
        padding: 3%;
    }

    .inputComment textarea {
        width: 98%;
        position: relative;
        height: 150px;
        border: 0 solid;
        outline: none;
        resize: none;
    }

    .inputComment .sent {
        border-radius: 30px;
        background-color: #ee464b;
        color: white;
        padding: 2px 15px;
        font-size: 16px;
        float: right;
        cursor: pointer;
        height: 25px;
    }

    .comment-list {
        width: 100%;
        border-radius: 14px;
        margin-top: 4%;
        height: 72%;
        position: relative;
    }

    .comment-ul {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 99%;
        position: relative;
        list-style-type: none;
        overflow: auto;
    }

    .comment-li {
        margin: 2%;
        float: left;
        width: 96%;
        position: relative;
        overflow: auto;
    }

    .comment-li-top {
        display: flex;
        float: left;
        align-items: center;
        width: 90%;
    }

    .comment-li-top span {
        margin-left: 8px;
    }

    .comment-li img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
    }

    .comment-li-content {
        margin-left: 7%;
        width: 86%;
        font-size: 18px;
        clear: left;
        float: left;
        padding: 5px;
        cursor: pointer;
        overflow: auto;
    }

    .comment-nickName {
        font-size: 18px;
        color: #2073e3;
    }

    .inputReply {
        float: left;
        margin-top: 1%;
        width: 76%;
        margin-left: 8%;
        position: relative;
        height: 150px;
        border-radius: 13px;
        padding: 2%;
    }

    .inputReply textarea {
        width: 98%;
        position: relative;
        height: 120px;
        border: 0 solid;
        outline: none;
        resize: none;
    }

    .inputReply .sent {
        border-radius: 30px;
        background-color: #ee464b;
        color: white;
        padding: 2px 15px;
        font-size: 16px;
        float: right;
        cursor: pointer;
        height: 25px;
    }
    .reply-ul {
        margin: 0;
        padding: 0;
        width: 100%;
        position: relative;
        list-style-type: none;
        overflow: auto;
    }

    .reply-li {
        margin-left: 7%;
        margin-top: 1%;
        float: left;
        width: 92%;
        position: relative;
        overflow: auto;
    }

    .reply-li-top {
        display: flex;
        float: left;
        align-items: center;
        width: 90%;
    }
    .reply-li img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
    }

    .reply-li-content {
        margin-left: 8%;
        width: 82%;
        font-size: 16px;
        clear: left;
        float: left;
        padding: 5px;
        cursor: pointer;
    }

    .reply-nickName {
        font-size: 16px;
        color: #2073e3;
    }

    .inputReplySon {
        float: left;
        margin-top: 1%;
        width: 69%;
        margin-left: 9%;
        position: relative;
        height: 150px;
        border-radius: 13px;
        padding: 2%;
    }

    .inputReplySon textarea {
        width: 93%;
        position: relative;
        height: 120px;
        border: 0 solid;
        outline: none;
        resize: none;
    }

    .inputReplySon .sent {
        border-radius: 30px;
        background-color: #ee464b;
        color: white;
        padding: 2px 13px;
        font-size: 13px;
        float: right;
        cursor: pointer;
        height: 22px;
    }
</style>

